<template>
    <div>
        <div v-if="directories.length>0">
            <div style="margin: 20px 0">
                <el-select v-model="selectedDirIndex" @change="selectedDir" filterable placeholder="选择目录">
                    <el-option
                            v-for="(item, idx) in directories"
                            :key="idx"
                            :label="item.Name"
                            :value="idx">
                    </el-option>
                </el-select>
            </div>

            <div class="el-card s-always-shadow el-card__body">
                <el-upload
                        ref="upload"
                        :action="'/admin/files?Dir='+directories[selectedDirIndex].Path"
                        :on-preview="handlePreview"
                        :before-remove="beforeRemove"
                        :file-list="files"
                        :http-request="uploadFiles"
                        :on-success="onSuccess"
                        name="Files"
                        :multiple="true"
                        :show-file-list="showFileList"
                        :accept="directories[selectedDirIndex].Accept">
                    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
                </el-upload>
            </div>
            <div>
                <el-dialog v-if="previewFile"
                           width="600px"
                           :title="previewFile"
                           :visible.sync="dialogFormVisible"
                           :append-to-body="true"
                           center :show-close="false">
                    <el-form>
                        <el-form-item>
                            <el-input type="textarea" v-model="previewContent" @change="changeContent()" :autosize="{ minRows: 10, maxRows: 20}"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" :disabled="disabledSave" @click="save()">保存</el-button>
                            <el-button @click="cancel()">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
        <div v-else><h2>暂无可管理的目录</h2></div>
    </div>
</template>

<script>
export default {
        data() {
            return {
                directories: [],
                selectedDirIndex:0,
                files:[],
                previewFile:"",
                previewContent:"",
                dialogFormVisible: false,
                disabledSave: false,
                cache:{},
                showFileList:true,
            }
        },
        created: function () {
            this.getDirectories();
        },
        methods: {
            changeContent() {
                this.cache[this.previewFile] = this.previewContent;
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`).then(()=>{
                    this.$axios.delete("/admin/files", {params: {Files:[file.name], Dir: this.directories[this.selectedDirIndex].Path}});
                });
            },
            getDirectories() {
                this.$axios.get("/admin/directories").then((resp)=>{
                    this.directories = [];
                    if(resp.data.ls && resp.data.ls.length>0) {
                        this.directories = resp.data.ls;
                        this.getFiles();
                    }
                }).catch(()=>{})
            },
            selectedDir() {
                this.getFiles();
            },
            getFiles() {
                this.$axios.get("/admin/files", {params: {Dir: this.getSelected().dir}}).then((resp)=>{
                    this.files = [];
                    let data = resp.data;
                    if(data.ls && data.ls.length>0) {
                        for (let i = 0, ln=data.ls.length; i < ln ; i++) {
                            data.ls[i].id = i+1;
                            data.ls[i].name = data.ls[i].Name;
                        }
                        this.files = data.ls;
                    }
                }).catch(()=>{});
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            getSelected() {
                return {dir: this.directories[this.selectedDirIndex].Path, file: this.previewFile}
            },
            handlePreview(file) {
                this.dialogFormVisible = true;
                this.previewFile = file.name;
                let content = this.cache[this.previewFile];
                if(!content) {
                    let selected = this.getSelected();
                    this.$axios.get("/admin/file-content", {params: {Dir: selected.dir, File: selected.file}}).then((resp)=>{
                        let data = resp.data;
                        if (data.content) {
                            this.cache[this.previewFile] = data.content;
                            this.previewContent = this.cache[this.previewFile];
                        }
                    });
                } else {
                    this.previewContent = content;
                }
            },
            save() {
                let selected = this.getSelected();
                this.disabledSave = true;
                this.$axios.put("/admin/file-content", {
                        Dir: selected.dir,
                        File: selected.file,
                        Content: this.cache[this.previewFile],
                    }).then((resp)=>{
                    this.disabledSave = false;
                    if(this.$isSuccessMsg(resp)) {
                        this.cancel();
                    }
                })
            },
            cancel() {
                this.dialogFormVisible = false;
                this.previewFile = "";
            },
            onSuccess(res, file, fileList) {
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].name === file.name) {
                        fileList.splice(i, 1);
                        i=0;
                    }
                }
                if(!!res.message && res.type==="success") {
                    fileList.splice(0, 0, file)
                }
            },
            uploadFiles(item) {
                this.showFileList = true;
                this.$uploadElementItem(item).then(res => {
                    if(res.data.images) {
                        for(let image of res.data.images) {
                            this.images.unshift(image)
                        }
                        this.showFileList = false;
                    }
                }).catch(() => {})
            },
        }
    };
</script>
<style scoped>
    .el-card__header{
        width: 100%;
    }
</style>